<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Gentelella - Free Bootstrap Admin Template by Colorlib. Beautiful, responsive admin dashboard template for building modern web applications.">
    <meta name="author" content="Colorlib">
    <link rel="icon" href="images/favicon.ico" type="image/ico" />

    <title>Gentelella - Free Bootstrap Admin Dashboard Template by Colorlib</title>

    <!-- Vite Entry Point - will bundle all styles -->
    <script type="module" src="/src/main-minimal-modern.js"></script>
    
    <!-- Custom Landing Page Styles are now in external SCSS -->
  </head>

  <body class="landing-page">
    <!-- Hero Section -->
    <section class="hero">
      <div class="container container-custom">
        <div class="hero-content">
          <h1>Gentelella</h1>
          <p class="subtitle">Free Bootstrap Admin Dashboard Template</p>
          <p class="credit">by <a href="https://colorlib.com" style="color: white; text-decoration: underline;">Colorlib</a></p>
          <p class="description">
            A beautiful, responsive admin template built with Bootstrap 5. Perfect for building 
            modern dashboards, admin panels, and web applications with elegant design and rich functionality.
          </p>
          <div class="cta-buttons">
            <a href="index.html" class="btn-primary-custom">
              <i class="fas fa-chart-line"></i> Explore Dashboard
            </a>
            <a href="login.html" class="btn-outline-custom">
              <i class="fas fa-sign-in-alt"></i> Try Demo
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features">
      <div class="container container-features">
        <div class="section-title">
          <h4>Powerful Features</h4>
          <p>Everything you need to build modern admin dashboards and web applications with confidence</p>
        </div>
        
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-mobile-alt"></i>
            </div>
            <h4>Fully Responsive</h4>
            <p>Works flawlessly on all devices - desktop, tablet, and mobile. Built with a mobile-first approach for optimal user experience across all screen sizes.</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-chart-bar"></i>
            </div>
            <h4>Rich Components</h4>
            <p>Includes interactive charts, data tables, forms, widgets, and dozens of UI components to build comprehensive admin panels and dashboards.</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-code"></i>
            </div>
            <h4>Clean Code</h4>
            <p>Well-structured, semantic HTML with clean CSS and organized JavaScript. Easy to customize, extend, and maintain for long-term projects.</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-palette"></i>
            </div>
            <h4>Modern Design</h4>
            <p>Contemporary flat design with beautiful color schemes, smooth animations, and intuitive user interface for engaging user experiences.</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-rocket"></i>
            </div>
            <h4>Fast Performance</h4>
            <p>Optimized for speed with minimal CSS/JS footprint and modern build tools. Loads quickly and runs smoothly on all modern browsers.</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-tools"></i>
            </div>
            <h4>Easy Customization</h4>
            <p>Modular SCSS files and well-documented code make it simple to customize colors, layouts, and components to match your brand.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Dashboard Preview Section -->
    <section class="dashboard-preview-section">
      <div class="container container-wide-custom">
        <div class="section-title">
          <h4>Dashboard Preview</h4>
          <p>See how your admin dashboard will look with real data and modern interface design</p>
        </div>
        
        <div class="dashboard-preview">
          <div class="dashboard-content">
            <div class="dashboard-header">
              <div>
                <h3 class="dashboard-title">Analytics Dashboard</h3>
                <p class="dashboard-subtitle">Real-time insights and performance metrics</p>
              </div>
              <div class="dashboard-user">
                <div class="user-avatar">JD</div>
                <div>
                  <div style="font-weight: 600; color: var(--text-dark);">John Doe</div>
                  <div>Administrator</div>
                </div>
              </div>
            </div>
            
            <div class="stats-grid">
              <div class="stat-card">
                <span class="stat-number">2,847</span>
                <div class="stat-label">Total Users</div>
              </div>
              <div class="stat-card">
                <span class="stat-number">$28,567</span>
                <div class="stat-label">Revenue</div>
              </div>
              <div class="stat-card">
                <span class="stat-number">1,428</span>
                <div class="stat-label">Orders</div>
              </div>
            </div>
            
            <div class="chart-area">
              <div class="chart-placeholder">
                <i class="fas fa-chart-area"></i>
                <p>Interactive Charts & Analytics</p>
                <small>Real-time data visualization with Chart.js, ECharts & more</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
      <div class="container container-features">
        <div class="stats-grid-main">
          <div class="stat-item-main">
            <h3>50+</h3>
            <p>UI Components</p>
          </div>
          <div class="stat-item-main">
            <h3>15+</h3>
            <p>Sample Pages</p>
          </div>
          <div class="stat-item-main">
            <h3>100%</h3>
            <p>Responsive</p>
          </div>
          <div class="stat-item-main">
            <h3>Free</h3>
            <p>Open Source</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
      <div class="container container-custom">
        <h4>Ready to Build Something Amazing?</h4>
        <p>Join thousands of developers who trust Gentelella for building beautiful admin dashboards and web applications</p>
        <div class="cta-buttons">
          <a href="index.html" class="btn-primary-custom">
            <i class="fas fa-play"></i> Start Exploring
          </a>
          <a href="login.html" class="btn-outline-custom">
            <i class="fas fa-user"></i> View Demo
          </a>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="container container-custom">
        <p>&copy; 2025 Gentelella. Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>. Built with ❤️ for developers worldwide.</p>
      </div>
    </footer>
  </body>
</html>
